import React from 'react'
import {
  Table, Input, Button, Popconfirm, Form, Select,
} from 'antd';
import isEqual from 'lodash/isEqual';
import EditableRow from './EditableRow'
import EditableCell from './EditableCell'
import styles from './index.less'

const Option = Select.Option;

/**
 * @description 配合form使用的编辑表格
 * column props: inputType [text, number, date, checkbox, select] 默认: text
 *               datePattern 默认：YYYY-MM-DD HH:mm:ss， 修改日期单元格后保存的日期格式
 *               selectProps: { dataSource : [], valueKey : String, textKey : String }
 *               selectProps 配合select下拉框使用，dataSource下拉框数据源，valueKey 值属性key, textKey 文本显示属性的key
 *
 */
class EditableTable extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      dataSource: []
    }
  }

  static getDerivedStateFromProps(nextProps, preState) {
    if (isEqual(nextProps.value, preState.value)) {
      return null;
    }
    // 将form initialValue的值 保存到state中
    return {
      dataSource: nextProps.value,
      value: nextProps.value,
    };
  }

  handleDelete = (key) => {
    const dataSource = [...this.state.dataSource];
    const newDataSource = dataSource.filter(item => item.key !== key);
    this.setState({ dataSource: newDataSource} );
    // 将修改后的数据同步到form
    const { onChange } = this.props;
    onChange(newDataSource);
  }

  handleAdd = () => {
    const { dataSource } = this.state;
    const count = dataSource.length;
    const newData = {
      key: count,
      name: `Edward King ${count}`,
      age: 32,
      address: `London, Park Lane no. ${count}`,
    };
    const newDataSource = [...dataSource, newData];
    this.setState({
      dataSource: newDataSource
    });
    // 将修改后的数据同步到form
    const { onChange } = this.props;
    onChange(newDataSource);
  }

  /**
   * 单元格保存数据的回调
   * @param row
   */
  handleSave = (row) => {
    const newData = [...this.state.dataSource];
    const index = newData.findIndex(item => row.key === item.key);
    const item = newData[index];
    newData.splice(index, 1, {
      ...item,
      ...row,
    });
    this.setState({ dataSource: newData });
    // 将修改后的数据同步到form
    const { onChange } = this.props;
    onChange(newData);
  }

  render() {
    const { dataSource } = this.state;
    const { columns } = this.props;
    const components = {
      body: {
        row: EditableRow,
        cell: EditableCell,
      },
    };
    const newColumns = columns.map((col) => {
      if (!col.editable) {
        return col;
      }
      return {
        ...col,
        onCell: record => ({
          record,
          editable: col.editable,
          dataIndex: col.dataIndex,
          title: col.title,
          handleSave: this.handleSave, // 单元格保存数据的回调
          inputType: col.inputType,
          datePattern: col.datePattern,
          selectProps: col.selectProps
        }),
      };
    });
    return (
      <div>
        <Button onClick={this.handleAdd} type="primary" style={{ marginBottom: 16 }}>
          Add a row
        </Button>
        <Table
          components={components}
          rowClassName={() => styles["editable-row"]}
          bordered
          dataSource={dataSource}
          columns={newColumns}
        />
      </div>
    );
  }
}

export default EditableTable;
